import React, { ReactNode } from 'react'
// type 在一个组件某一个地方要用的时候 
// interface 多个模块多个组件都要实现对应的数据对象，单独定义一个interface文件

interface IProps {
    children: ReactNode
}

type IState = {
    auth: boolean,
    username: string
}

const defaultValue = {
    auth: false, // 默认false
    username: '',
    signin: ()=>{}
}
/* 老版本的ts
type AppContextType = typeof defaultValue;
let { Provider, Consumer: AppCosumer } = React.createContext<AppContextType>(defaultValue) 
*/

// Consumer: AppCosumer 冒号后面给consumer加一个别名暴露出去
let { Provider, Consumer: AppCosumer } = React.createContext(defaultValue)

class AppProvider extends React.Component<IProps, IState> {
    constructor(props: IProps){
        super(props)
        this.state = {
            auth: false,
            username: ''
        }
    }

    signin = ()=>{
        this.setState({
            auth: true,
            username: 'admin123'
        })
    }

    render(){
        return (
            <Provider value={{
                auth: this.state.auth,
                username: this.state.username,
                signin: ()=>this.signin()
            }}>
                {
                    this.props.children
                }
            </Provider>
        )
    }
}

export {
    AppProvider, AppCosumer
}
